<template>
	<view>
		<block v-if="item.link.path == 'customer_service'">
			<u-button :plain="true" open-type="contact" :custom-style="{
					padding: '0',
					width:'100%'
				}" type="" :hair-line="false" size="medium">
				<view class="flex-col col-center row-center"
					:style="{marginBottom: lastNavListArr.indexOf(idx) > -1 ? `${$px2rpx(styles.in_padding_bottom)}rpx` : '32rpx',marginTop:'20rpx'}">
					<u-image class="m-b-14" :border-radius="$px2rpx(styles.img_border_radius)" v-if="content.style==1"
						:src="$getImageUri(item.url)" width="82rpx" height="82rpx" mode="aspectFit" />
					<view class="xs" :style="{color: styles.color,marginTop:'-14rpx'}">{{item.name}}</view>
				</view>
			</u-button>
		</block>
		<block v-else>
			<view class="flex-col col-center" @tap="navigate"
				:style="{marginBottom: lastNavListArr.indexOf(idx) > -1 ? `${$px2rpx(styles.in_padding_bottom)}rpx` : '32rpx'}">
				<u-image class="m-b-14" :border-radius="$px2rpx(styles.img_border_radius)" v-if="content.style==1"
					:src="$getImageUri(item.url)" width="82rpx" height="82rpx" mode="aspectFit" />
				<view class="xs" :style="{color: styles.color}">{{item.name}}</view>
			</view>
		</block>
	</view>
</template>

<script type="text/javascript">
	export default {
		props: {
			content: {
				type: [Object, Array]
			},
			styles: {
				type: [Object, Array]
			},
			item: {
				type: Object
			},
			idx: {
				type: Number
			}

		},
		data() {
			return {
				lastNavListArr: []
			}
		},
		methods: {
			navigate() {
				const {
					path,
					params,
					type
				} = this.item.link
				if (this.item.appid != undefined && this.item.appid != '') {
					uni.navigateToMiniProgram({
						appId: this.item.appid,
						path: this.item.app_path,
						success: (res) => {
							// console.log(res)
						}
					})
				} else if (type == 'call_phone') {
					uni.makePhoneCall({
						phoneNumber: params.phone
					})
				} else if (type == 'send_msg') {
					uni.sendSms({
						phoneNumber: params.phone
					})
				} else {
					if (!path) return
					this.$Router.push({
						path: path,
						query: params
					})
				}
			},
		},
		onShow() {
			const {
				content: {
					data
				},
				styles: {
					nav_line_num
				}
			} = this
			const navdata = [...data.reverse()],
				num = nav_line_num
			//把数组按顺序排序
			data.reverse()
			var len = navdata.length
			var mod = len % num
			var arr = []
			var numidx = mod == 0 ? num : mod
			for (var i = navdata.length - 1; i >= len - numidx; i--) {
				arr.push(i)
			}
			this.lastNavListArr = arr
		},
		computed: {
			// lastNavListArr() {
			// 	const {
			// 		content: {
			// 			data
			// 		},
			// 		styles: {
			// 			nav_line_num
			// 		}
			// 	} = this
			// 	const navdata = [...data.reverse()],
			// 		num = nav_line_num
			// 	//把数组按顺序排序
			// 	data.reverse()
			// 	var len = navdata.length
			// 	var mod = len % num
			// 	var arr = []
			// 	var numidx = mod == 0 ? num : mod
			// 	for (var i = navdata.length - 1; i >= len - numidx; i--) {
			// 		arr.push(i)
			// 	}
			// 	return arr
			// }
		}
	};
</script>